<div #upload class="x-upload x-upload-{{ type }}" [class.x-disabled]="disabled">
  <input type="file" #file (change)="change($event)" [attr.accept]="accept" [multiple]="multiple" style="display: none" />
  <div class="x-upload-buttons" [class.x-upload-buttons-template]="isTemplateText" (click)="uploadClick()">
    <ng-container *xOutlet="getText">
      <x-button icon="fto-upload" [disabled]="disabled" type="primary">{{ getText }}</x-button>
    </ng-container>
  </div>
  <ng-container [ngSwitch]="type">
    <ng-container *ngSwitchCase="'list'">
      <ul class="x-upload-files">
        <li *ngFor="let file of files; index as i; trackBy: trackByItem">
          <a [href]="file.url" target="_blank" [title]="file.name">
            <x-icon type="fto-file-text"></x-icon>
            <span class="x-upload-filename">{{ file.name }}</span>
          </a>
          <ng-container [ngSwitch]="file.state">
            <x-icon class="x-upload-state" *ngSwitchCase="'ready'" type="fto-clock"></x-icon>
            <span class="x-upload-percent" *ngSwitchCase="'uploading'">{{ file.percent }}%</span>
            <x-icon class="x-upload-state success" *ngSwitchCase="'success'" type="fto-check"></x-icon>
            <x-icon class="x-upload-state error" *ngSwitchCase="'error'" type="fto-info"></x-icon>
          </ng-container>
          <x-button *ngIf="file.state !== 'uploading'" icon="fto-x" (click)="remove(file, i)" onlyIcon closable></x-button>
        </li>
      </ul>
    </ng-container>
    <ng-container *ngSwitchCase="'img'">
      <div class="x-upload-img-item {{ file.state }}" *ngFor="let file of files; index as i; trackBy: trackByItem" [title]="file.name">
        <div class="x-upload-img-inner">
          <img [src]="file.url" (load)="imgLoad($event, file)" (error)="imgError($event, file)" />
          <x-icon type="fto-image"></x-icon>
          <span *ngIf="file.state == 'uploading'">{{ file.percent }}%</span>
        </div>
        <div class="x-upload-img-btns">
          <div class="x-upload-img-btns-inner">
            <ng-container [ngSwitch]="file.state">
              <x-icon class="x-upload-state" *ngSwitchCase="'ready'" type="fto-clock"></x-icon>
              <x-icon class="x-upload-state error" *ngSwitchCase="'error'" type="fto-info"></x-icon>
              <a [href]="file.url" target="_blank" *ngSwitchCase="'success'">
                <x-icon type="fto-eye"></x-icon>
              </a>
            </ng-container>
            <x-icon *ngIf="imgCut && file.state === 'success'" type="fto-crop" (click)="onImgCut(file, i)"></x-icon>
            <x-icon *ngIf="file.state !== 'uploading'" type="fto-trash-2" (click)="remove(file, i)"></x-icon>
          </div>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>
